<template>
	<view>
		<image class="bg" mode="widthFix" src="@/static/imgs/head1.png"></image>
		<view class="cantainer">
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<uni-search-bar v-model="deviceName" style="padding: 10px 0;" radius="20" @confirm="search"
				@cancel="clear" cancelText="重置" placeholder="请输入关键字"></uni-search-bar>
			<view class="flexR around mtb30">
				<view class="banner" v-for="i in bannerList" :key="i.name" @click="switchPage(i.path)">
					<image class="imgs" mode="widthFix" :src="(i.icon)"></image>
					<span>{{ i.name }}</span>
				</view>
			</view>
			<view class="whiteBox flexR mtb20" @click="warnPage">
				<image style="width: 20px;" mode="widthFix" src="@/static/imgs/red.png"></image>
				<image style="width: 24px; margin: 0 10px;" mode="widthFix" src="@/static/imgs/warn.png"></image>
				<swiper v-if="warnList.length" class="swiper" circular autoplay :interval="2000">
					<swiper-item v-for="i in warnList" :key="i.id">{{ i.driverName }}</swiper-item>
				</swiper>
				<span v-else>{{warnList[0] && warnList[0].title || '暂无警报'}}</span>
				<span class="flow"></span>
				<uni-icons type="right" color="#000" size="20"></uni-icons>
			</view>
			<view class="whiteBox mtb20">
				<view class="flexR mb10">
					<view>硬件信息</view>
					<view class="flow"></view>
					<view class="c80" @click="switchPage(bannerList[0].path)">更多></view>
				</view>
				<view class="flexR between">
					<view class="flexC between list left">
						<view>硬件1</view>
						<button class="btn" @click="see(0)">点击查看</button>
					</view>
					<view class="flexC between list right">
						<view>硬件2</view>
						<button class="btn" @click="see(1)">点击查看</button>
					</view>
				</view>
				<view class="flexR between mt10">
					<view class="flexC around center list2" @click="see(2)">
						<image class="cpu" mode="widthFix" src="@/static/imgs/icon-cpu.png"></image>
						<view>硬件3</view>
					</view>
					<view class="flexC center around list2" @click="see(3)">
						<image class="cpu" mode="widthFix" src="@/static/imgs/icon-cpu.png"></image>
						<view>硬件4</view>
					</view>
					<view class="flexC center around list2" @click="see(4)">
						<image class="cpu" mode="widthFix" src="@/static/imgs/icon-cpu.png"></image>
						<view>硬件5</view>
					</view>
				</view>
			</view>
			<view v-for="i in list" :key="i.id">
				<listVideo :info="i"/>
			</view>
			<view v-if="!list.length" class="kong">暂无数据</view>
			<view v-if="last && list.length" class="last">已经到底了</view>
		</view>
		<view></view>
	</view>
</template>

<script>
import listVideo from '@/components/listVideo.vue';

export default {
	components: { listVideo },
	data() {
		return {
			last: false,
			deviceName: '',
			page: 1,
			list: [],
			warnList: [],
			bannerList: [
			// 	{
			// 	path: '/pages/tabBar/tabBar2',
			// 	name: '硬件信息',
			// 	icon: require('@/static/imgs/banner1.png')
			// }, 
			{
				path: '/pages/tabBar/tabBar3',
				name: '视频',
				icon: require('@/static/imgs/banner2.png')
			}, {
				path: '/pages/tabBar/tabBar4',
				name: '设备监测数据',
				icon: require('@/static/imgs/banner3.png')
			},]
		};
	},
	onShow() {
		this.list = [];
		this.last = false;
		this.page = 1;

		this.getList();
		this.getInfo();
	},
	onReachBottom() {
		setTimeout(()=>this.loadmore(), 1000)
	},
	methods: {
		clear() {
			this.list = [];
			this.page = 1;
			this.deviceName = '';
			this.getList();
		},
		search() {
			this.page = 1;
			this.list = [];
			this.getList();
		},
		loadmore() {
			console.log('rtrt',this.page);
			if(this.last) return;
			this.page += 1;
			this.getList();
		},
		warnPage() {
			if(!this.warnList.length) {
				return this.$msg('暂无警报')
			}
			uni.navigateTo({
				url: '/pages/todo'
			});
		},
		see(idx) {
			let obj = this.list[idx]
			if(obj) {
				uni.navigateTo({
					url: `/pages/preview?info=${JSON.stringify(obj)}`
				});
			} else {
				return this.$msg('暂无信息')
			}
		},
		getList(refrsh) {
			let url = `/senor/device/applist?pageNum=${this.page}&pageSize=10&name=${this.deviceName}`;
			this.$axios({
				method: 'get',
				url,
			}).then(res=>{
				this.list = this.list.concat(res.rows);
				this.list.map(i=>{
					if(i.deviceSensibility==null) {
						i.deviceSensibility = {
							temperature: '--',
							humidity: '--'
						}
					} else {
						i.deviceSensibility.humidity = parseFloat(i.deviceSensibility.humidity*1/10).toFixed(2)
						i.deviceSensibility.temperature = parseFloat(i.deviceSensibility.temperature*1/10).toFixed(2)
					}
				})
				if(this.list.length>=res.total) {
					this.last = true;
				}
			})
		},
		getInfo() {
			this.$axios({
				method: 'get',
				url: '/senor/warn/appNews',
			}).then(res=>{
				this.warnList = res.rows
			})
			
		},
		switchPage(path) {
			uni.switchTab({
				url: path
			});
		}

	}
}
</script>

<style lang="scss" scoped>
.btn {
	width: 76px;
	height: 24px;
	margin: 0;
	line-height: 24px;
	border-radius: 24px;
	background-color: rgba(17, 168, 163, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 12px;
	text-align: center
}
.swiper {
	width: 70%;
	height: 20px;
}
.cpu {
	width: 40px;
	height: 40px;
	padding: 2px;
	border-radius: 50%;
	border: 1px solid #11A8A3;
}
.mr20 {
	margin-right: 20px;
}

.info {
	margin: 0 10px;
}

.list {
	padding: 14px;
	width: 48%;
	height: 80px;
}

.list2 {
	padding: 2px;
	width: 30%;
	height: 80px;
	background: #f9f9f9;
	border-radius: 10px;
}

.left {
	background: url('@/static/imgs/list-item1.png') no-repeat center/100% 100%;
}

.right {
	background: url('@/static/imgs/list-item2.png') no-repeat center/100% 100%;
}

.banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 30%;
	span {
		color: #fff;
	}

	.imgs {
		width: 44px;
		height: 44px;
	}
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}
</style>